<template>
	<view class="container">
		<!-- 背景图 -->
		<!--<view class="x-c"><image class="logo-bg" src="/static/image/icon/log_bg.jpg" mode=""></image></view>-->
		<view class="head-box"><cu-custom :isBack="true"></cu-custom></view>
		<view class="wrapper">
			<!-- logo -->
			<view class="x-c"><image class="logo" src="/static/image/icon/logo.png"></image></view>

			<!-- 登录tab -->
			<view class="tab-box x-f">
				<!--<view class="tab-item x-c" @tap="onLoginWay(1)">
					<text class="tab-title">密码登录</text>
					<view class="line-box" password v-show="loginWay === 1"><text class="triangle"></text></view>
				</view>
				<view class="tab-item x-c" @tap="onLoginWay(0)">
					<text class="tab-title">手机登录</text>
					<view class="line-box" v-show="loginWay === 0"><text class="triangle"></text></view>
				</view>-->
			</view>
			<!-- 表单 -->
			<view class="login-box y-f" v-show="loginWay === 0">
				<view class="input-item x-c">
					<input class="inp" v-model="addressData.phone" type="number" placeholder="请输入手机号" placeholder-class="pl" />
				</view>
				<view class="input-item x-c">
					<input class="inp" v-model="addressData.code" type="number" placeholder="请输入验证码" placeholder-class="pl" />
					<button class="cu-btn code-btn" :loading="phoneLoading" :disabled="phoneDisabled" @tap="getCode">{{ phoneText }}</button>
				</view>
			</view>
			<!-- #ifdef H5 -->
			<view class="login-box y-f" v-show="loginWay === 1">
				<view class="input-item x-c">
					<input class="inp" v-model="loginForm.username" type="text" placeholder="请输入账号" placeholder-class="pl" />
				</view>
				<view class="input-item x-c">
					<input class="inp" password v-model="loginForm.password" type="password" placeholder="请输入密码" placeholder-class="pl" />
				</view>
			</view>
			<!-- #endif -->
			<!-- 登录按钮 -->
			<view class="x-c y-f">
				<button class="cu-btn login-btn mb30" @tap="toLogin">登录</button>
				<!--<view class="x-bc tip-box ">
					<button class="cu-btn tip-btn" @tap="jump('/pages/public/register')">立即注册</button>
					<view class="" v-show="loginWay === 1"><button class="cu-btn tip-btn" @tap="jump('/pages/public/forgot')">忘记密码</button></view>
				</view>-->
			</view>
			<view class="third-party y-f">
				<button class="cu-btn wx-logo-box y-f" @tap="wxLogin">
					<image class="auto-login" src="http://shopro.7wpp.com/imgs/auto_login.png" mode=""></image>
					<view class="">微信一键登录</view>
				</button>
			</view>
		</view>
	</view>
</template>
<script>
    import Wechat from '@/common/wechat/wechat';
    import { mapMutations, mapActions, mapState } from 'vuex';
    import store from '@/common/store';
    import wx from '@/common/jweixin-module/index'

	export default {
		data() {
			return {
                loginWay: 1,
                loginForm: {
                    username: '17607909843',
                    password: 123,
                },
                addressData: {
                    phone: '',
                    code: '',
                },
                phoneLoading: false,
                phoneDisabled: true,
                phoneText: '获取验证码'
			}
		},
        watch: {
            addressData: {
                handler: function(val) {
                    let reg = /^[1][0-9]{10}$/;
                    if (!reg.test(val.phone)) {
                        this.phoneDisabled = true
                    } else {
                        if (!this.timer) {
                            this.phoneDisabled = false
                        }
                    }
                },
                deep: true
            }
        },
        computed: {
            ...mapState({
                initData: state => state.init.initData
            })
        },
        onLoad() {
            if (this.$Route.query.token) {
                this.setTokenAndBack(this.$Route.query.token);
            }
        },
		methods: {
            ...mapActions(['getUserInfo', 'setTokenAndBack']),
            async wxLogin() {
                wx.miniProgram.reLaunch({
                    url: "/pages/authorize/authorize",
                    success: function(){
                        console.log('success')
                    },
                    fail: function(err){
                    },
                    complete:function(){
                        console.log('complete');
                    }
                });
            },
            onLoginWay(flag) {
                this.loginWay = flag;
            },
            // 获取短信
            async getCode() {
                if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.addressData.phone)){
                    uni.showToast({ title:'请输入正确的手机号码', icon:'none' })
                    return;
                }
                let that = this;
                that.$api.api('sms', {phone: that.addressData.phone}).then(res => {
                    this.phoneLoading = true
                    this.phoneDisabled = true
                    this.setTime(60)
                }).catch(error => {
                });
            },
            toLogin() {
                let that = this;
                if (that.loginWay === 0) {
                    that.$store.dispatch('Mobile', { phone: that.addressData.phone, content: that.addressData.code}).then(res => {
                        uni.showToast({ title: '登录成功', icon: 'none'})
                        console.log(res)
                    }).catch(error => {
                        uni.showToast({ title: error.message, icon: 'none'})
                    })
                } else {
                    that.$store.dispatch('Login', that.loginForm).then(res => {
	                }).catch(error => {
	                })
                }
            },
            setTime(time) {
                if (time <= 0) {
                    this.phoneText = '重新获取'
                    this.phoneLoading = false
                    clearTimeout(this.timer)
                    return
                }
                this.phoneText = `还剩${time}s`
                this.timer = setTimeout(() => {
                    this.phoneLoading = false
                    time--
                    this.setTime(time)
                }, 1000)
            },
		}
	}
</script>
<style lang="scss">
	.head-box {
		.cuIcon-back {
			font-size: 50rpx !important;
			font-weight: 500;
		}
	}
	.x-c {
		.logo-bg{
			width: 100%;
			height: 100%;
		}
		.logo {
			width: 360rpx;
			height: 180rpx;
			/*margin-top: 40%;*/

		}
	}
.container {
	position: relative;
	width: 100vw;
	height: 100vh;

	.y-f {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.wrapper {
		position: absolute;
		z-index: 90;
		padding-bottom: 40upx;
		padding-top: 115px;
		width: 100vw;
		height: 100vh;
		top: 0;

		// 登录选项卡
		.tab-box {
			margin: 60rpx auto 30rpx;
			width: 608rpx;
			display: flex;

			.tab-item {
				flex: 1;
				height: 80rpx;
				position: relative;

				.tab-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #47C57B;
				}

				.line-box {
					position: absolute;
					width: 300rpx;
					height: 4rpx;
					background: #47C57B;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);

					.triangle {
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						disply: block;
						width: 0;
						height: 0;
						border-width: 10rpx;
						border-style: solid;
						border-color: transparent transparent #47C57B transparent;
					}
				}
			}
		}

		// 输入
		.login-box {
			.input-item {
				height: 108rpx;
				border-bottom: 1rpx solid #47C57B;
				width: 608rpx;

				.inp {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
				}

				.pl {
					color: #47C57B;
				}

				.code-btn {
					background: none;
					font-size: 28rpx;
					color: #47C57B;
					&:after {
						border: 0;
					}
				}
			}
		}

		// 登录
		.login-btn {
			width: 630upx;
			height: 80upx;
			border-radius: 40rpx;
			margin-top: 70upx;
			background: linear-gradient(90deg, #47C57B, #47C57B);
			box-shadow: 0px 7rpx 6rpx 0px #47C57B;
			color: #fff;
		}

		.tip-box {
			width: 630rpx;

			.tip-btn {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				text-decoration: underline;
				color: #47C57B;
				background: none;
			}
		}

		// 一键登录按钮
		.wx-logo-box {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #47C57B;
			margin-top: 80rpx;
			background: none;
			display: block;
			&:after {
				border: 0;
			}
			&:hover {
				background: none;
			}
			.auto-login {
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				margin-bottom: 10rpx;
			}
		}
	}

}


</style>